<template>
  <div class="content">
    <div style="
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 20px;
          display: flex;
          z-index:999999999;
          flex-direction: column;
          align-items: center;
          justify-content: center;"
         :append-to-body="true"
    >
      <div class="cover">
        <div class="cover-top">
          <div class="top-left">
            <div class="sign"></div>
            <div class="title">{{ title }}</div>
          </div>
          <div class="top-right" @click="onCloseDialog">×</div>
        </div>
        <div class="cover-middle">
          <div class="top1">
            <img class="img" src="@/assets/images/cloud/gs.png">
            <div class="tit" style="color: #fff;font-size: 20px">{{info.enterpriseName}}</div>
          </div>
          <div class="top1">
            <div class="sx" style="color: #fff"><span style="color: rgb(0,252,249);">统一社会信用代码：</span>{{info.erterpriseIdNum}}</div>
            <div class="tit1" style="color: #fff"><span style="color: rgb(0,252,249);">法定代表人：</span>{{info.legalPersonName}}</div>
          </div>
          <div class="top1">
            <div class="sx" style="color: #fff"><span style="color: rgb(0,252,249);">注册资本：</span>{{info.regcap !='null'?info.regcap+'万元':'暂无'}}</div>
            <div class="tit1" style="color: #fff"><span style="color: rgb(0,252,249);">地址：</span>{{info.enterpriseAddress}}</div>
          </div>

          <div class="top1">
            <div class="tit1" style="color: #fff"><span style="color: rgb(0,252,249);">招聘人员：</span>{{info.hrName}}</div>
            <div class="tit1" style="color: #fff"><span style="color: rgb(0,252,249);">招聘人员联系方式：</span>{{info.hrMobile}}</div>
          </div>
          <div class="top1">
            <div class="tit1" style="color: #fff"><span style="color: rgb(0,252,249);">是否缴纳农民工保障金：</span>是</div>
            <div class="tit1" style="color: #fff"><span style="color: rgb(0,252,249);">是否缴纳工伤保险：</span>是</div>
          </div>
          <div class="top1">

          </div>
          <div class="top3">
            <div class="sx" style="color:  rgb(0,252,249)">基本信息</div>
            <!--            <div class="tit" style="color: #fff" v-html="info.ifo"></div>-->
            <div class="info1">
              <div  style="max-width: 100%;">
                <!-- {{detail.introduction}} -->
                <div :class="{hide:!iSinfo}" v-html="info.enterpriseIntroduction" style="color: #fff"></div>
              </div>
              <div class="text" @click="showinfo" v-if="!iSinfo">【查看全部】</div>
            </div>
            <div class="text" @click="showinfo" v-if="iSinfo" >收起</div>
          </div>
        </div>
        <div class="cover-bottom1">
          <div class="item" v-for="item in list" :key="item.id">
            <div class="top">
              <div class="top-left">{{item.jobTitle}}</div>
              <div class="top-right">{{item.count}}</div>
            </div>
            <div class="address">
              {{item.jobAddress}}
            </div>
            <div class="condition">
              {{item.minEducationText}}·{{item.expRequireText}}
            </div>
            <div class="striping"></div>
            <div class="bottom">
              <div class="time">{{item.crtTime}}</div>
              <div class="intention" style="cursor: pointer;" >需求数：{{item.jobNumber}}人</div>
              <div class="send">投递人：{{item.resumeCount}}人</div>
            </div>
          </div>
        </div>
      </div>
      <Modal v-if="emphasisPartyModal.show" width="900px" height="500px" @closeModal="emphasisPartyModal.show=false" :title="emphasisPartyModal.title">
        <div v-if="emphasisPartyModal.title=='创业导师数'" class="emphasis-party-list list-1" v-loading="list1Loadng">
          <div style="background: #213651;border-bottom: 1px solid #303f52" class="table-row">
            <div class="head table-col number">序号</div>
            <div class="head table-col name">姓名</div>
            <div class="head table-col gender">学历</div>
            <div class="head table-col birthday">求职意向</div>
            <div class="head table-col partyTime">期望薪资</div>
            <div class="head table-col position">投递时间</div>
          </div>
          <div class="table-row" v-for="(item,index) in peopleList" :key="item.index">
            <div class="head table-col number">{{ index+1}}</div>
            <div class="head table-col name">{{ item.realName }}</div>
            <div class="head table-col gender">{{ item.educationText }}</div>
            <div class="head table-col birthday">{{ item.postName }}</div>
            <div class="head table-col partyTime">{{ item.salaryMax }}</div>
            <div class="head table-col cause">{{ item.crtTime }}</div>
          </div>
        </div>
        <div class="page-block">
          <div class="page-btn prev" :class="emphasisPartyModal.page===1?'disable':''">上一页</div>
          <div class="current-page">第{{emphasisPartyModal.page}}页</div>
          <div class="page-btn next" :class="emphasisPartyModal.page*emphasisPartyModal.limit>=emphasisPartyModal.total?'disable':''" @click="handleSizeChange()">下一页</div>
          <!--          <div class="total">共{{emphasisPartyModal.total}}条数据</div>-->
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>


import index from "../../views/index/index.vue";
import Modal from "@/components/Modal/Modal.vue";
 import {
 getDhEnterpriseByIdApi
 } from "@/api/statistics6";


export default {
  name: "CoverCom-10",
  computed: {
    index() {
      return index
    }
  },
  components: {Modal},
  props: ['id', 'oncloseDialog2', 'title', 'name','areaId'],
  data() {
    return {
      iSinfo: false,
      peopleList:[],
      list1Loadng:false,
      emphasisPartyModal:{
        show:false,
        title:'',
        page:1,
        limit:10,
        total:10,
      },
      info: {},
      list: [],
      count: 2,
      page: 1,
      limit: 7,
      value: '',
      tableData: [{id: 1, entName: '海威实创', jobName: '前端开发', demandCount: 30, deliver: 18,accessCount:158, hr: '王先生'},
        {id: 2, entName: '奥思博项目管理', jobName: 'java开发', demandCount: 20, deliver: 11,accessCount:158, hr: '李先生'},
        {id: 3, entName: '麦力科技', jobName: '现场操作', demandCount: 20, deliver: 13,accessCount:158, hr: '赵经理'},
        {id: 4, entName: '浩峰商贸', jobName: '销售顾问', demandCount: 50, deliver: 44,accessCount:158, hr: '吴经理'},
        {id: 5, entName: '易通融合', jobName: '电池组件操作工', demandCount: 10, deliver: 4,accessCount:158, hr: '罗先生'},
        {id: 6, entName: '春光热力', jobName: '数据标注员', demandCount: 15, deliver: 10,accessCount:158, hr: '谢先生'},
        {id: 7, entName: '金众惠', jobName: '财务助理', demandCount: 10, deliver: 5,accessCount:158, hr: '王建国'},
        {id: 8, entName: '中复连众', jobName: '客服', demandCount: 20, deliver: 16,accessCount:158, hr: '何先生'},
        {id: 9, entName: '鸿泽农业', jobName: '出纳', demandCount: 8, deliver: 4,accessCount:158, hr: '赵先生'},
        {id: 10, entName: '千丝形象', jobName: '店长', demandCount: 3, deliver: 2,accessCount:158, hr: '李先生'},]
    }
  },
  methods: {
    showinfo() {
      this.iSinfo = !this.iSinfo
    },
    onCloseDialog() {
      this.oncloseDialog2(0)
    },
    handleSizeChange(e) {
      this.limit = e
      this.getList()
    },
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage', this.page)
      this.getList()
    },
    getList() {
      // if(this.areaId==1||this.areaId==2)
      // {
        getDhEnterpriseByIdApi({id:this.id,isDp: 1}).then((res)=>{
          if(res.code===200){
            this.info = res.data
            this.list = res.data.jobPublishList
          }
        }).finally(()=>{
          this.oppLoading = false
        })
      // }
      // if(this.areaId==3)
      // {
      //   getJtEnterpriseByIdApi({id:this.id,isDp: 1}).then((res)=>{
      //     if(res.code===200){
      //       this.info = res.data
      //       this.list = res.data.jobPublishList
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(this.areaId==4)
      // {
      //   getGzEnterpriseByIdApi({id:this.id,isDp: 1}).then((res)=>{
      //     if(res.code===200){
      //       this.info = res.data
      //       this.list = res.data.jobPublishList
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(this.areaId==5)
      // {
      //   getDhEnterpriseByIdApi({id:this.id,isDp: 1}).then((res)=>{
      //     if(res.code===200){
      //       this.info = res.data
      //       this.list = res.data.jobPublishList
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(this.areaId==6)
      // {
      //   getYmEnterpriseByIdApi({id:this.id,isDp: 1}).then((res)=>{
      //     if(res.code===200){
      //       this.info = res.data
      //       this.list = res.data.jobPublishList
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(this.areaId==7)
      // {
      //   getAksEnterpriseByIdApi({id:this.id,isDp: 1}).then((res)=>{
      //     if(res.code===200){
      //       this.info = res.data
      //       this.list = res.data.jobPublishList
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(this.areaId==8)
      // {
      //   getSbEnterpriseByIdApi({id:this.id,isDp: 1}).then((res)=>{
      //     if(res.code===200){
      //       this.info = res.data
      //       this.list = res.data.jobPublishList
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }

    }
  },
  mounted() {
    this.getList()
    this.fairActive = this.id
  },

}
</script>

<style lang="scss" scoped>
.content{
  .info1 {
    //position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;

    div {
      text-align:justify ;
      font-size: 16px;
      line-height: 30px;
      word-break: break-word; //换行模式
      //background-color: #fff;
      color: #fff;
    }

    .text {
      width: 100px;
      font-size: 16px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      // background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
      color: #FF0014;
      opacity: 1;
      position: absolute;
      bottom: -20px;
      right: 0;
    }
  }
  .text {
    width: 100%;
    font-size: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    // background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
    color: #FF0014;
    opacity: 1;
  }
  .hide {
    width: 100%;
    //height: 120px;
    line-height: 30px;
    //height: 370px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

  }
  .page-block{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .page-btn{
      margin: 0 15px;
      border-radius: 5px;
      border: 1px solid #07a6ff;
      color: #fff;
      padding: 5px 10px;
      font-size: 14px;
      cursor: pointer;
    }
    .page-btn.disable{
      cursor: no-drop;
      color: #ccc;
      border: 1px solid #ccc;
    }
    .current-page{
      font-size: 14px;
      color:#fff;
    }
    .total{
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(-50%,-50%);
      color: #fff;
      font-size: 14px;
    }
  }
  .emphasis-party-list{
    width: 100%;
    overflow-y: auto;
    height: calc(100% - 50px);
    .table-row{
      width: 100%;
      height: 35px;
      display: flex;
      align-items: center;
      .table-col{
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 14px;
      }
    }
    .table-row:nth-child(even){
      background: #0c1d2f;
    }
  }
  .emphasis-party-list.list-1{
    .table-col.number{
      width: 16%;
    }
    .table-col.name{
      width: 16%;
    }
    .table-col.gender{
      width:16%;
    }
    .table-col.birthday{
      width: 16%;
    }
    .table-col.partyTime{
      width: 16%;
    }
    .table-col.position{
      width: 16%;
    }
    .table-col.cause{
      width: 16%;
    }
    .table-col.phone{
      width: 16%;
    }
  }
  .emphasis-party-list.list-2{
    .table-col.number{
      width: 20%;
    }
    .table-col.name{
      width: 40%;
    }
    .table-col.gender{
      width:40%;
    }

  }
  .emphasis-party-list.list-3{
    .table-col.number{
      width: 10%;
    }
    .table-col.name{
      width: 44%;
    }
    .table-col.gender{
      width:16%;
    }
    .table-col.birthday{
      width: 10%;
    }
    .table-col.partyTime{
      width: 20%;
    }
  }
  .cover{
    position: relative;
    width: 70%;
    //min-height: 100%;
    height: auto;
    border-radius: 5px;
    border: 1px solid #07a6ff;
    background: rgba(4, 20, 59, 0.7);
    padding: 10px 20px 20px 20px;
    .cover-top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      .top-left{
        display: flex;
        .sign{
          background-color: #498CF3;
          width: 10px;
          height: 20px;
          border-radius: 15px;
          margin-right: 15px;
        }
        .title{
          color: #ffffff;
        }
      }
      .top-right{
        color: #2FA1F9;
        font-size: 40px;
        cursor: pointer;
        margin-right: 5px;
        width: 23px;
        height: 42px;
        padding-bottom: 20px;
      }
    }
    .cover-middle{
      width:calc((100% - 20px));
      //height: calc((60% - 20px)/1);
      border: 1px solid #07a6ff;
      background-color: rgb(31,40,99);
      border-radius: 5px;
      padding: 20px;
      margin: 0 auto;
      .top3{
        position: relative;
        .tit{
          line-height: 40px;
        }
      }
      .top1{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .img{
          width: 90px;
          height: 90px;
          border-radius: 10px;
          margin-right: 20px;
        }
        .sx{
          width: 50%;
        }
        .tit1{
          width: 50%;
        }
      }
    }
    .cover-bottom1::-webkit-scrollbar-track {
      background-color: #041a41
    }
    .cover-bottom1::-webkit-scrollbar {
      width: 7px;
      background-color: #041a41
    }
    .cover-bottom1::-webkit-scrollbar-thumb {
      background-color: #022c5c;
      border-radius: 20px;
    }
    .cover-bottom1{
      width: 100%;
      //height: calc(100% - 70px);
      height: 220px;
      display: flex;
      flex-wrap: wrap;
      overflow-y: scroll;

      .item{
        width: calc((100% - 40px)/2);
        height: 200px;
        border: 1px solid #07a6ff;
        border-radius: 5px;
        background-color: rgb(31,40,99);
        padding: 20px;
        margin: 10px;
        font-size: 18px;
        .top{
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          .top-left{
            color: #fff;
            width: 320px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .top-right{
            color: rgb(0,252,249);
          }
        }
        .address{
          color: #fff;
          margin-bottom: 10px;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .condition{
          //margin-bottom: 10px;
          color: #fff;
        }
        .striping{
          argin-top: 20px;
          width: 100%;
          height: 2px;
          margin: 20px 0;
          background-color: #234182;
          //background: -webkit-linear-gradient(left,#fff -4%,#c7c7c7 50%,#fff);
        }
        .bottom{
          display: flex;
          margin-bottom: 10px;
          justify-content: space-between;
          .time{
            color: #fff;
          }
          .intention{
            color: #fff;
          }
          .send{
            color: #fff;
          }
        }
      }
    }
    .cover-bottom{
      width: 100%;
      height: calc(100% - 70px);
      overflow: hidden;
      ::v-deep{
        .el-table th.el-table__cell{
          background: rgb(33, 54, 81);
          border-bottom: 1px solid rgb(48, 63, 82);
          text-align: center;
          color: #fff;
        }
        .el-table tr{
          background: rgba(4, 20, 59, 0.7);
          border-bottom: 1px solid rgb(48, 63, 82);
        }
        .el-table .el-table__cell{
          background: rgba(4, 20, 59, 1.0);
          border-bottom: 1px solid rgb(48, 63, 82);
          text-align: center;
        }
        .el-table .cell{
          color: #fff;
        }
      }
    }
    .paging{
      display: flex;
      justify-content: center;
      //margin: -10px 0;
      ::v-deep{
        .el-pagination.is-background .btn-prev{
          background: rgb(33, 54, 81);
          border-bottom: 1px solid rgb(48, 63, 82);
          padding: 0 10px;
        }
        .el-pagination.is-background .btn-prev span{
          color: #fff;
        }
        .el-pagination.is-background .btn-next{
          background: rgb(33, 54, 81);
          border-bottom: 1px solid rgb(48, 63, 82);
          padding: 0 10px;
        }
        .el-pagination.is-background .btn-next span{
          color: #fff;
        }
      }
    }
  }
}
</style>
